@charset "utf-8";
//基础颜色
$foreground: black;
$background: white;
$anchor: rgb(3, 102, 214);
$hint: rgb(192, 192, 192);
$hover: lighten($hint, 20%);
$button: rgb(239, 243, 246);
$edge: rgb(27, 31, 35);
$primary: rgb(40, 167, 69);
$danger: rgb(203, 36, 49);
:root{
	--webapp-background: white;
	--webapp-foreground: black;
	//--webapp-colorempty: transparent;
	--webapp-gap: 1rem;
	--webapp-gapitem: .4rem;
	--webapp-gapradius: .4rem;

	--webapp-anchor: $anchor;
	--webapp-button: $button;

	--webapp-hover: $hover;
	--webapp-hint: $hint;
	--webapp-edge: $edge;

	--webapp-primary: $primary;
	--webapp-danger: $danger;

	--webapp-font-monospace: consolas, monospace;
	--webapp-font-sans-serif: verdana, georgia, arial, sans-serif;
	
	background: var(--webapp-background);
	color: var(--webapp-foreground);
	font: 100% var(--webapp-font-sans-serif);
	>body{
		@extend %webapp;
		font-size: 1rem;
		a{@extend %webapp-anchor;}
		>div[class*=-grid]{
			grid-template-columns: auto 1fr;
			>header:first-of-type{
				grid-column: 1 / -1;
				&:empty{
					margin-top: var(--webapp-gap);
				}
			}
			>aside:first-of-type:not(:empty){
				display: inline-flex;
				gap: var(--webapp-gap);
				flex-direction: column;
				margin-left: var(--webapp-gap);
		
			}
			>main:first-of-type{
				margin: 0 var(--webapp-gap);
			}
			>footer:first-of-type{
				grid-column: 1 / -1;
				padding: var(--webapp-gap);
			}
		}
	}
}
%webapp{
	margin: 0;
	padding: 0;
}
%webapp-anchor{
	color: var(--webapp-anchor);
	cursor: pointer;
	outline: none;
	text-decoration: none;
	&:hover{
		text-decoration: underline;
	}
}
[class|=webapp]{
	@extend %webapp;
	&[class*=-grid]{
		display: grid;
	}
	&[class*=-radius]{
		padding: var(--webapp-gapradius) 0;
		border-radius: var(--webapp-gapradius);
	}
}
[class|=webapp-dialog]{
	background: var(--webapp-background);
	border: 1px solid rgba($edge, .23);
	box-shadow: 0 .5rem 2rem rgba($edge, .175);
}
%webapp-button,[class|=webapp-button]{
	font: 1rem var(--webapp-font-sans-serif);
	color: var(--webapp-foreground);
	padding: .25rem 1rem;

	border: 1px solid rgba($edge, .2);
	//border-radius: 3px;
	white-space: nowrap;
	background-color: $button;
	background-image: linear-gradient(-180deg, lighten($button, 3.4%) 0%, $button 90%);
	&:hover{
		background-image: linear-gradient(-180deg, lighten($button, .2%) 0%, darken($button, 2.8%) 90%);
		border-color: rgba($edge, .35);
		text-decoration: none;
	}
	&:focus{
		box-shadow: 0 0 0 .2rem rgba($anchor, .3);
		z-index: 1;
	}
	&:active{
		background-image: none;
		background-color: darken($button, 2%);
		border-color: rgba($edge, .35);
		box-shadow: inset 0 .15rem .3rem rgba($edge, .15);
	}
}
[class|=webapp-input]{
	&:not([type=checkbox],[type=radio]){
		font: 1rem var(--webapp-font-sans-serif);
		padding: .32rem .4rem;
			
		
		border: 1px solid lighten($edge, 72%);
		// border-radius: 3px;
		background-color: rgba($background, 0.6);
		box-shadow: inset 0 1px 2px rgba($edge, 0.075);
		
		text-overflow: ellipsis;
		&:focus{
			outline: none;
			box-shadow: inset 0 1px 2px rgba($edge, 0.075), 0 0 0 .2rem rgba($anchor, .3);
			border-color: lighten($anchor, 13.3%);
			z-index: 1;
		}
		&:invalid{
			box-shadow: 0 0 0 .2rem rgba($danger, 0.4);
			border-color: $danger;
		}
		&:disabled{
			pointer-events: none;
			box-shadow: none;
			background-color: lighten($hint, 20%);
		}
		&::placeholder{
			color: $hint;
		}
	}
	&[type=checkbox],&[type=radio]{
		appearance: none;
		
		@extend [class|=webapp-button];
		&::before{
			
			border: 1px solid red;
		}
		&::after{
			content: attr(value);
		}
		
	}
}
[class|=webapp-bar]{
	display: flex;
	>a,>button,>select,>details{
		@extend [class|=webapp-button];
	}
	>input,>textarea{
		@extend [class|=webapp-input];
	}
}
%webapp-list-gap{
	white-space: nowrap;
	>:not(details){
		display: block;
	}
	>:not(details),>details>summary{
		padding: var(--webapp-gapitem) var(--webapp-gap);
		//@extend [class|=webapp][class*=-gapitem];
	}
}
%webapp-list-hover{
	&:hover{
		background: $hover;
	}
}
%webapp-list-menu{
	>details{
		@extend details[class|=webapp][class*=-menu],
				details[class|=webapp][class*=-anchor];
	}
}
dl[class|=webapp]{
	&[class*=-gap]>dd{@extend %webapp-list-gap;}
	&[class*=-hover]>dd{@extend %webapp-list-hover;}
	//&[class*=-menu]>dd{@extend [class|=webapp][class*=-menu];}
}
ol[class|=webapp],
ul[class|=webapp]{
	list-style-type: none;
	&[class*=-gap]>li{@extend %webapp-list-gap;}
	&[class*=-hover]>li{@extend %webapp-list-hover;}
	&[class*=-menu]>li{@extend %webapp-list-menu;}
}


details[class|=webapp]{
	display: inline-block;

	&[class*=-anchor]{
		>summary:first-child{
			@extend %webapp-anchor;
		}
	}



	&[class*=-button]{
		padding: 0;
		>summary:first-child{
			cursor: default;
			line-height: 1.81rem;
			padding: 0 1rem;
		}
	}
	&[class*=-menu]{
		position: relative;
		>:not(summary):first-of-type{
			position: absolute;
			// top: calc(-1px - var(--webapp-gapradius));
			// left: 100%;
			z-index: 9999;
			@extend [class|=webapp-dialog];
		}
		>dl:first-of-type{
			>dd{
				@extend %webapp-list-gap,
						%webapp-list-hover;
			}
		}
		>ol:first-of-type,>ul:first-of-type{
			@extend %webapp;
			list-style-type: none;
			>li{
				@extend %webapp-list-gap,
						%webapp-list-hover;
			}
		}
	}
}


form[class|=webapp]{
	display: inline-flex;
	gap: 1rem;
	flex-direction: column;
	min-width: 21rem;
	>fieldset{
		border: none;
		margin: 0;
		padding: 0;
		&:first-child:empty{
			display: none;
		}
		@extend [class|=webapp-bar];
	}
}


nav[class|=webapp]{
	padding: var(--webapp-gapitem) 0;
	ul{
		@extend %webapp,
				ul[class|=webapp][class*=-gap],
				ul[class|=webapp][class*=-menu];
		
	}
	// ul:not(:first-child){
	// 	top: calc(-1px - var(--webapp-gapradius));
	// 	left: 100%;
	// }
	>ul:first-child{
		>li{
			display: inline-block;
		}
	}
}

table[class|=webapp]{
	display: inline-table;
	border: 1px solid var(--webapp-foreground);
	border-collapse: collapse;
	empty-cells: show;
	td{
		padding: var(--webapp-gapradius);
		&:empty::before{
			content: 'NULL';
			color: var(--webapp-hint);
		}
		// >span{
		// 	display: block;
		// 	overflow: hidden;
		// 	text-overflow: ellipsis;
		// }
	}
	>thead{
		>tr:first-child{
			background-color: var(--webapp-anchor);
			color: var(--webapp-background);
		}
	}
	>tbody{
		>tr>td{
			border: 1px solid var(--webapp-foreground);
		}
		>tr.fieldset{
			background-color: var(--webapp-hint);
			>td{
				white-space: nowrap;
			}
		}
		>tr:not(.fieldset)>td{
			overflow: hidden;
			white-space: pre;
			text-overflow: ellipsis;
		}
	}
	>tfoot{
		background-color: var(--webapp-button);
		>tr:first-child>td:first-child{
			text-align: right;
		}
		>tr:first-child>td:first-child>a{
			@extend [class|=webapp-button];
		}
		>tr:first-child>td:first-child>input{
			@extend [class|=webapp-input];
		}
	}


	&[class*=-hover]{
		>tbody>tr:not(.fieldset):hover{
			background-color: var(--webapp-hover);
			
		}
	}
	&[class*=-even]{
		>tbody>tr:nth-child(even) {
			background-color: var(--webapp-button);
		}
	}
	&[class*=-top]{
		>tbody>tr>td{
			vertical-align: top;
		}
	}
}
select[class|=webapp]{
	outline: none;
	>optgroup,>option{
		background-color: var(--webapp-background);
	}
}
code[class|=webapp]{
	white-space: pre;
	font-family: var(--webapp-font-monospace);
}